html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.view {
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  .list {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
    .item {
      flex-shrink: 0;
      width: 100%;
      img {
        width: 100%;
        display: block;
      }
    }
  }
  .btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(213, 209, 209);
    outline: none;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    &.prev {
      left: 15px;
    }
    &.next {
      right: 15px;
    }
  }
  .page-list {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    .page-item {
      width: 15px;
      height: 15px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 1px solid #666;
      margin: 0 10px;
      position: relative;
      cursor: pointer;
      &.active {
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          background-color: gray;
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }
      }
    }
  }
}
